<template>
  <div class="top-menu-wrapper">
    <div class="menu-item" :class="{'menu-selected': selected}" @click="clickMenu()" v-if="value">
      <div class="menu-icon">
        <i :class="icon"></i>
      </div>
      <div class="menu-text" v-if="value">{{ label }}</div>
      <div class="arrow" v-if="value && isShowChild">
        <i class="el-icon-arrow-up" v-if="active"></i>
        <i class="el-icon-arrow-down" v-else></i>
      </div>
    </div>
    <el-tooltip v-else class="item" effect="dark" :content="label" placement="right">
      <div class="menu-item" :class="{'menu-selected': selected}" @click="clickMenu()">
        <div class="menu-icon">
          <i :class="icon"></i>
        </div>
        <div class="menu-text" v-if="value">{{ label }}</div>
        <div class="arrow" v-if="value && isShowChild">
          <i class="el-icon-arrow-up" v-if="active"></i>
          <i class="el-icon-arrow-down" v-else></i>
        </div>
      </div>
    </el-tooltip>
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    name: 'top-menu',
    props: {
      icon: {
        type: String,
        default: function () {
          return ''
        }
      },
      label: {
        type: String,
        default: function () {
          return ''
        }
      },
      selected: {
        type: Boolean,
        default: function () {
          return false
        }
      },
      value: Boolean,
      child: {
        type: Array,
        default: function () {
          return []
        }
      },
      active: Boolean
    },
    components: {},
    data() {
      return {
        isShowChild: false
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      clickMenu() {
        this.$emit('clickMenu')
      },
      init() {
        if (this.child.length > 0) {
          this.isShowChild = true
        }
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "../../common/css/mixin.styl"
  .top-menu-wrapper
    color #d9d9d9
    .menu-item
      text-align center
      height 50px
      line-height 50px
      padding 0 20px
      font-size 14px
      cursor pointer
      user-select none
      animation slide-down .5s ease-in
      -webkit-animation slide-down .5s ease-in
      &:hover
        color #00b0d4
        background-color rgba(0, 0, 0, .25)
      displayFlex()
      .menu-icon
        margin-right 5px
      .menu-text
        padding 0 0 0 5px
      .arrow
        flex(1)
        text-align right !important
  .menu-selected
    color #00b0d4
    background-color rgba(0, 0, 0, .25)
</style>
